<template>
  <!-- 开台 -->
  <div class="app">
    <van-nav-bar
      :title="clubinfo.store_name"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div class="tablecontainer">
      <div class="tableinfobox">
        <div class="numberinfo">
          <span class="clubinfotype">{{ clubinfo.type }}</span>
          <span class="clubinfotnumber">{{ clubinfo.table_number }}</span>
          <span>号球桌</span>
        </div>
        <div class="moneyinfo">
          <span>当前价格:</span>
          <span class="clubinfotnumber">￥{{ clubinfo.price }}</span>
          <span>/小时</span>
        </div>
      </div>
      <div class="kaitaibox">
        <div style="font-size: 17px; line-height: 25px">开台</div>
        <div class="kaitaibtn" @click="postReservation">
          <div style="margin-left: 25px">
            <div class="btnname">直接开台</div>
            <div class="btndescribe">会员余额>=押金，自动开台</div>
          </div>
          <div class="kaitaiicon"></div>
        </div>
        <div class="kaitaibtn" @click="gotolinkwithdata('TableReserve')">
          <div style="margin-left: 25px">
            <div class="btnname">预约开台</div>
            <div class="btndescribe">押金结账后退回</div>
          </div>
          <div class="kaitaiicon"></div>
        </div>
        <div class="kaitaibtn">
          <div style="margin-left: 25px">
            <div class="btnname">美团开台</div>
            <div class="btndescribe">使用美团验券开台</div>
          </div>
          <div class="kaitaiicon"></div>
        </div>
        <div class="kaitaibtn">
          <div style="margin-left: 25px">
            <div class="btnname">抖音开台</div>
            <div class="btndescribe">使用抖音验券开台</div>
          </div>
          <div class="kaitaiicon"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "@/store/index.js";
import { showToast } from "vant";
import { opentabledirect } from "@/http/request.js";
export default {
  data() {
    return {
      clubinfo: {},
      deposit_amount: 0,
      sinuoke_price: 0,
      zhongba_price: 0,
      baojian_price: 0,
      formdata: {},
    };
  },
  methods: {
    async initTable() {
      if (this.clubinfo.grade == 1) {
        this.clubinfo.price = this.clubinfo.zhongba_price;
        this.clubinfo.type = "中巴";
      } else if (this.clubinfo.grade == 2) {
        this.clubinfo.price = this.clubinfo.baojian_price;
        this.clubinfo.type = "包间";
      } else if (this.clubinfo.grade == 3) {
        this.clubinfo.price = this.clubinfo.sinuoke_price;
        this.clubinfo.type = "斯诺克";
      }
    },
    gotolinkwithdata(name) {
      this.$router.push({
        name: name,
        params: {
          clubinfo: JSON.stringify(this.clubinfo),
        },
      });
    },
    postReservation() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      const city = store.getStoreCityName;
      this.formdata.user_id = userinfo.id;
      this.formdata.phone = userinfo.phone;
      this.formdata.city = city;
      this.formdata.store_id = this.clubinfo.store_id;
      this.formdata.start_time = this.clubinfo.start_time;
      this.formdata.end_time = this.clubinfo.end_time;
      this.formdata.t_id = this.clubinfo.table_id;
      this.formdata.t_number = this.clubinfo.table_number;
      this.formdata.t_grade = this.clubinfo.grade;
      opentabledirect(this.formdata).then((res) => {
        showToast(res.msg);
        if (res.code == 0) {
          const store = useStore();
          const playingorder = store.getPlayingOrder;
          playingorder.table.push(res.data);
          store.setPlayingOrder(playingorder);
          this.$router.push("/tableplaying");
        }
      });
    },
    backlink() {
      this.$router.back();
    },
  },
  created() {
    this.clubinfo = JSON.parse(this.$route.params.clubinfo);
    this.initTable();
  },
};
</script>

<style scoped>
.app {
  padding: 0;
  margin: 0;
}
.tablecontainer {
  width: 100%;
  height: calc(100vh - 56px);
  background-color: #f2f3f5;
  padding-top: 20px; /* 添加 padding 到父容器 */
}

.tableinfobox {
  position: relative; /* 让伪元素绝对定位相对于此元素 */
  display: block;
  width: 90%;
  height: 100px;
  margin: 0 auto;
  border-radius: 15px;
  overflow: hidden; /* 防止遮罩超出范围 */
}

.tableinfobox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 遮罩宽度 */
  height: 100%; /* 遮罩高度 */
  background-color: rgba(0, 0, 0, 0.3); /* 灰色遮罩，可调整透明度 */
  z-index: 1;
}

.tableinfobox {
  background-image: url("../../assets/images/kaitaibg.jpg");
  background-position: 50% 35%;
  background-size: 110%;
  background-repeat: no-repeat;
}
.numberinfo {
  padding: 20px 15px 0 15px;
  font-size: 22px;
  font-weight: 550;
  color: #ffffff;
  position: relative;
  z-index: 2;
}
.clubinfotnumber {
  color: #efa248;
  font-size: 22px;
}
.moneyinfo {
  padding: 5px 15px 0 15px;
  color: #ffffff;
  font-size: 16px;
  position: relative;
  z-index: 2;
}
.kaitaibox {
  width: 90%;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kaitaibtn {
  width: 100%;
  height: 80px;
  margin: 5px auto;
  border-radius: 50px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btnname {
  font-size: 20px;
  font-weight: 550;
}
.btndescribe {
  margin-top: 5px;
  font-size: 16px;
}
.kaitaiicon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #5e94fe;
  margin-right: 15px;
}
</style>